<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no" />
  <title>声音播放</title>
  <script type="text/javascript" src="static/js/jquery.js"></script>
  <script src="https://cdn.bootcss.com/fabric.js/2.3.0/fabric.js"></script>
  <script type="text/javascript">
    $(document).ready(function () {
      var canvas = this.__canvas = new fabric.Canvas('canvas');
      fabric.Object.prototype.transparentCorners = false;

      // var rect = new fabric.Rect({
      //   left: 100,
      //   top: 50,
      //   width: 100,
      //   height: 100,
      //   fill: 'green',
      //   angle: 20,
      //   padding: 10
      // });
      
      // var circle = new fabric.Circle({
      //     radius: 20, fill: 'green', left: 50, top: 300
      // });
      // var triangle = new fabric.Triangle({
      //     width: 20, height: 30, fill: 'blue', left: 250, top: 20
      // });

      // canvas.add(rect, circle, triangle);


      // rect.set('fill', 'red');
      // rect.set({ strokeWidth: 5, stroke: 'rgba(100,200,200,0.5)' });
      // rect.set('flipY', true);
        
      var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');

canvas.add(path.set({ left: 100, top: 200 }));


      fabric.loadSVGFromURL('../static/images/15.svg', function(objects, options) {

        var shape = fabric.util.groupSVGElements(objects, options);
        // canvas.add(shape.scale(0.6));
        shape.set({ left: 200, top: 100 }).setCoords();
        canvas.renderAll();

        canvas.forEachObject(function(obj) {
          var setCoords = obj.setCoords.bind(obj);
          obj.on({
            moving: setCoords,
            scaling: setCoords,
            rotating: setCoords
          });
        })
      });

      canvas.on('after:render', function() {
        canvas.contextContainer.strokeStyle = '#555';

        canvas.forEachObject(function(obj) {
          var bound = obj.getBoundingRect();

          canvas.contextContainer.strokeRect(
            bound.left + 0.5,
            bound.top + 0.5,
            bound.width,
            bound.height
          );
        })
      });
    });
   </script>
</head>
<body>
  
    <canvas id="canvas" width='800' height='800'></canvas>


</body>
</html>


